<template>
  <div class="special">
      <div class="s-top">
        <div class="t-left">{{goodArr.name}}</div>
        <div class="t-right">{{goodArr.des}}</div>
      </div>
      <div class="s-body">
        <img :src=good.pic @click="toDetail(good.id)">
        <div class="s-bot">
          <div class="s-price">
            <span class="symbol">￥</span>
            <span class="price">{{price}}</span>
            <del class="old-price">原价 {{good.price}}</del>
          </div>
          <h6 class="title">{{good.name}}</h6>
          <div class="s-des">
            <div>{{good.des}}</div>
            <div class="sales">月销{{good.sales}}笔</div>
          </div>
          <svg class="cart" aria-hidden="true" @click="add(good)">
            <use xlink:href="#icon-sy_gwc"></use>
          </svg>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'special',

    data () {
      return {
        good: [],
        price: ''
      };
    },
    props: {
      goodArr: {
        type: Object
      },
      region: {
        type: String
      }
    },
    created () {
    },
    methods: {
      compareVal(value) {
        // 按权重排序
        value.sort(function compare(obj1, obj2) {
          let val1 = parseInt(obj1.weight);
          let val2 = parseInt(obj2.weight);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        });
      },
      toDetail(id) {
        this.$router.push(
          {
            name: 'good-detail',
            query: {
              id: id,
              region: this.region
            }
          });
      },
      add(good) {
        this.$store.commit('goodAttr', good);
        this.$store.commit('showAttr', true);
        this.$store.commit('region', this.region);
      }
    },
    mounted() {
      let goods = {
        type: 'simple',
        ids: this.goodArr.product
      };
      this.$Sale.getListGoods(goods).then(res => {
        let prices = [];
        this.good = res.data[0];
        this.good.norms.forEach((data) => {
          prices.push(data.price);
        });
        this.price = Math.min.apply(Math, prices);
      }, () => {
      });
    },
    computed: {},
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .special
    background-color #fff
    padding vw(15)
    position relative
    .s-top
      display flex
      justify-content space-between
      height vw(30)
      line-height vw(30)
      .t-left
        font-size vw(14)
        color #333
      .t-right
        font-size vw(10)
        color #999
    .s-body
      border 1px solid #d7d7d7
      overflow hidden
      border-radius vw(10)
      position relative
      img
        width 100%
        border-right vw(10)
      .s-bot
        padding vw(10)
        position relative
        .s-price
          color main-color
          .symbol
            font-size vw(12)
          .price
            font-size vw(16)
            margin-left vw(-2)
          .old-price
            font-size vw(12)
            color #999
            margin-left vw(10)
        .title
          font-size vw(16)
          color #333
          height vw(30)
          line-height vw(30)
        .s-des
          font-size vw(12)
          color #999
          display flex
          height vw(30)
          line-height vw(30)
          justify-content space-between
          .sales
            font-size vw(10)
        .cart
          width vw(20)
          height vw(20)
          fill #999
          position absolute
          right vw(20)
          bottom vw(45)
</style>
